<template>
  <div :class="['input-container', { focus: isFocused || value }]">
    <input
      v-if="type.toLowerCase() !== 'textarea'"
      :type="type"
      class="input"
      :value="value"
      @input="onInput"
      @focus="isFocused = true"
      @blur="onBlur"
    >
    <textarea
      v-else
      class="input"
      :value="value"
      @input="$emit('input', $event.target.value)"
      @focus="isFocused = true"
      @blur="isFocused = false"
    />
    <label>{{ label }}</label>
    <span>{{ label }}</span>

    <!-- 邮箱候选下拉 -->
    <ul v-if="showSuggestions" class="suggestions">
      <li
        v-for="(s, index) in filteredSuggestions"
        :key="index"
        @mousedown.prevent="selectSuggestion(s)"
      >
        {{ s }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'InputField',
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text' // text | email | tel | textarea | password
    }
  },
  data() {
    return {
      isFocused: false,
      emailDomains: ['gmail.com', '163.com', 'qq.com', 'outlook.com', 'yahoo.com'],
      showSuggestions: false
    }
  },
  computed: {
    filteredSuggestions() {
      if (this.type.toLowerCase() !== 'email') return []
      const val = this.value
      if (!val || !val.includes('@')) return []
      const [prefix, domainPart] = val.split('@')
      if (!domainPart) {
        return this.emailDomains.map(d => `${prefix}@${d}`)
      }
      return this.emailDomains
        .filter(d => d.startsWith(domainPart))
        .map(d => `${prefix}@${d}`)
    }
  },
  methods: {
    onInput(e) {
      const val = e.target.value
      this.$emit('input', val)
      if (this.type.toLowerCase() === 'email') {
        this.showSuggestions = val.includes('@') && this.filteredSuggestions.length > 0
      }
    },
    onBlur() {
      // 延迟隐藏，保证 mousedown 事件能触发
      setTimeout(() => {
        this.isFocused = false
        this.showSuggestions = false
      }, 150)
    },
    selectSuggestion(suggestion) {
      this.$emit('input', suggestion)
      this.showSuggestions = false
    }
  }
}
</script>

<style scoped>
.input-container {
  position: relative;
  margin: 12px 15px;
  width: 100%;
}

.input {
  width: 100%;
  outline: none;
  border: 2px solid #eee;
  background: none;
  padding: 0.6rem 1.2rem;
  color: #0e1110; /* 输入文字深色 */
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 25px;
  transition: 0.3s;
}

.input-container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #aaa;
  font-size: 0.9rem;
  pointer-events: none;
  transition: 0.5s;
}

.input-container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
}

.input-container span:before,
.input-container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  //background-color: #0e1110;
  top: 50%;
  transform: translateY(-50%);
}

.input-container span:before {
  left: 50%;
}

.input-container span:after {
  right: 50%;
}

.input-container.focus label,
.input:focus + label {
  top: 0;
  transform: translateY(-50%);
  left: 25px;
  font-size: 0.8rem;
  color: #0e1110;
}

.input-container.focus span:before,
.input-container.focus span:after,
.input:focus ~ span:before,
.input:focus ~ span:after {
  width: 50%;
  opacity: 1;
}

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 2px;
  list-style: none;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.suggestions li:hover {
  background: #f5f5f5;
}
</style>
